<template>  
    <view class="container" style="position: relative;">
		<!-- 右上角设置和提醒 -->
		<!-- <view class="tips">
			<view class="iconfont icon-shezhi" style="font-size: 48upx;"></view>
			<view class="iconfont icontongzhi" style="font-size: 48upx;margin-left: 30upx;">
				<view class="bage">3</view>
			</view>
		</view> -->
		
		<!-- 基础信息 -->
		<view class="user-section">
			<image class="bg" src="/static/temp/user-bg.png"></image>
			<view class="user-info">
				<view class="user-info-box">
					<view class="portrait-box" @click="upDateInfo">
						<image class="portrait" :src="userInfoDetail.avatar || '/static/missing-face.png'"></image>
					</view>
					<view class="info-box">
						<text class="username">{{userInfoDetail.nickname || '游客'}}<text @click.stop="bindMyphone" style="padding-left: 20rpx;font-size: 26rpx;color: #666;" v-show="!userInfoDetail.mobile">[绑定手机]</text><text @click.stop="bindMyphone" style="padding-left: 20rpx;font-size: 26rpx;color: #666;" v-show="userInfoDetail.mobile">{{ getPhone }}[修改手机]</text></text>
						<view class="userlabel" v-show="isCompletion" @click="upDateInfo">
							<text v-show="userInfoDetail.babyname">{{ userInfoDetail.babyname}}</text>
							<text v-show="userInfoDetail.baby_sex === 1" style="padding: 0 16rpx;">&nbsp;男&nbsp;</text>
							<text v-show="userInfoDetail.baby_sex === 2" style="padding: 0 16rpx;">&nbsp;女&nbsp;</text>
							<text v-show="userInfoDetail.baby_sex === 0" style="padding: 0 16rpx;">&nbsp;未知&nbsp;</text>
							<text>{{ time }}</text>
							<view class="iconfont iconbianji ic"></view>
						</view>
						<!-- <view>请完善信息</view> -->
						<view class="userlabel" v-show="!isCompletion" @click="upDateInfo">请完善信息<view class="iconfont iconbianji ic"></view></view>
					</view>
				</view>
				<view class="infolabel">
					<view class="l1" @click="navTo(15)"><view class="iconfont iconjifen01 ic"></view> {{userInfoDetail.balance}}余额 | 消费明细</view>
					<view class="l1" v-show="userInfoDetail.center_name" style="background-color: #f5eee3;color: #cfa972;margin-left: 20rpx;" @click="upDateInfo"><view class="iconfont icon-jinbaobeiai ic"></view>{{ userInfoDetail.center_name }}</view>
				</view>
			</view>						
		</view>
		<!-- 功能菜单 -->
		<!-- <view class="order-section">
			<view class="order-item" @click="navTo(1)" hover-class="common-hover"  :hover-stay-time="50">
				<view class="img"><image src="/static/temp/user_icon_m1.png"></image></view>
				<text>我的订单</text>
			</view>
			<view class="order-item" @click="navTo(2)"  hover-class="common-hover" :hover-stay-time="50">
				<view class="img"><image src="/static/temp/user_icon_m2.png"></image><label class="bage">3</label></view>
				<text>购物袋</text>
			</view>
			<view class="order-item" @click="navTo(3)" hover-class="common-hover"  :hover-stay-time="50">
				<view class="img"><image src="/static/temp/user_icon_m3.png"></image></view>
				<text>优惠券</text>
			</view>
			<view class="order-item" @click="navTo(4)" hover-class="common-hover"  :hover-stay-time="50">
				<view class="img"><image src="/static/temp/user_icon_m4.png"></image></view>
				<text>我的收藏</text>
			</view>
		</view> -->
		<!-- 合作伙伴图片 -->
		<!-- <view class="partner" @click="navTo(14)" v-if="partner === 1">
			<image src="https://oss.laiba.shop/system/images/partner.png" mode=""></image>
		</view> -->
		<view class="cover-container">			
			<!-- 辅助列表 -->
			<view class="history-section icon">	
				<!-- <navigator :url="'/pages/address/address'"><list-cell title="实名认证" imgsrc="/static/temp/user_icon_02.png"></list-cell></navigator> -->
				<!-- <list-cell title="收货地址" imgsrc="/static/temp/user_icon_01.png" @eventClick="navTo(5)"></list-cell> -->
				<!-- <list-cell title="实名认证" imgsrc="/static/temp/user_icon_02.png" @eventClick="navTo(6)"></list-cell> -->
				<!-- <list-cell title="礼品卡激活" imgsrc="/static/temp/user_icon_03.png" @eventClick="navTo(7)"></list-cell> -->
				<!-- <list-cell title="在线客服" imgsrc="/static/temp/user_icon_04.png" @eventClick="navTo(8)"></list-cell> -->
				<list-cell title="我的签约"  imgsrc="/static/temp/user_icon_10.png" @eventClick="navTo(8)"></list-cell>
				<list-cell title="来爸分期"  imgsrc="/static/temp/user_icon_05.png" @eventClick="navTo(9)"></list-cell>
				
			</view>
			<!-- 辅助菜单 -->
			<view class="other-section">
				<view class="other-item" @click="navTo(10)" hover-class="common-hover"  :hover-stay-time="50">
					<view class="img"><image src="/static/temp/user_icon_06.png"></image></view>
					<text>在线客服</text>
				</view>
				<view class="other-item" @click="navTo(11)"  hover-class="common-hover" :hover-stay-time="50">
					<view class="img"><image src="/static/temp/user_icon_07.png"></image></view>
					<text>意见反馈</text>
				</view>
				<view class="other-item" @click="navTo(12)" hover-class="common-hover"  :hover-stay-time="50">
					<view class="img"><image src="/static/temp/user_icon_08.png"></image></view>
					<text>商务合作</text>
				</view>
				<view class="other-item" @click="navTo(13)" hover-class="common-hover"  :hover-stay-time="50">
					<view class="img"><image src="/static/temp/user_icon_09.png"></image></view>
					<text>关于我们</text>
				</view>
			</view>
			<view class="copyright">
				<image src="/static/temp/copyright_logo.png"></image>
				<view class="text">
					Copyright ©2018-2019福州来爸电子商务有限公司<br>ICP许可证号:闽ICP备18013391号<br>增值电信业务许可证号:闽B2-20190888
				</view>
			</view>
		</view>
			
		
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState 
    } from 'vuex'; 
	 import { login, getBase, getUserInfo, getIsPartner, getWxConfig, getDaysDiffBetweenDates } from '../../api/index.js'
	 import wx from '../jweixin/index.js'
    export default {
		components: {
			listCell
		},
		data(){
			return {
				userInfoDetail: {} ,// 当前用户信息
				isCompletion: true,
				partner: 0, // （是否合伙人 1-是 0-否）
				time: '' // 生日差
			}
		},
		onLoad(){
			// uni.getStorage({
			//     key: 'userInfo',
			//     success: (res)=> {
			// 		console.log(123);
			//         console.log(res.data);
			// 		console.log(123);
			// 		this.userInfoDetail = res.data
			//     }
			// });
			
			this._getUserInfo() // 获取当前用户信息
			this._getIsPartner() // 判断是否显示分享赚佣金
		},
		onShow() {
			// this._getUserInfo() // 获取当前用户信息			
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 1) {
				this.navTo('/pages/set/set');
			}else if(index === 0){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				});
			}
		},
		// #endif
        computed: {
			// ...mapState(['hasLogin','userInfo'])
			getPhone() {
				// return this.userInfoDetail.mobile.slice(0,3) + '****' + this.userInfoDetail.mobile.slice(this.userInfoDetail.mobile.length - 4)
				return this.userInfoDetail.mobile.slice(0,3) + '****' + this.userInfoDetail.mobile.slice(-4)
				// return ''
			},
			
		},
        methods: {
			_getIsPartner() {
				getIsPartner({},res => {
					this.partner = res.data.partner
				})
			},
			// 获取当前用户信息
			_getUserInfo() {
				getUserInfo({}, (res) => {
					if (res.code === 3) {
						uni.showToast({
				　　　　　　 title: res.message,
				　　　　　　 icon: 'none'
				　　　　 })
						let url = encodeURIComponent(`https://mobile.laiba.shop/html/#/pages/user/user`)
						window.location.href = 'https://mobile.laiba.shop/activity/visitor/auth?url=' + url
					} else {
						this.userInfoDetail = res.data.member
						this._getBase() // 判断是否补全资料
						this._getWxConfig() // 分享
						this._getTimeDifference() // 计算宝宝生日差
					}
				})
			},
			_getWxConfig() {
				getWxConfig({}, (res) => {
					console.log(res)
					let data = {
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature,// 必填，签名
						// jsApiList: ['updateAppMessageShareData','updateTimelineShareData','downloadImage'] ,// 必填，需要使用的JS接列表
						jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','downloadImage'] // 必填，需要使用的JS接口列表
					}
					
					wx.config(data)
					wx.ready( () => {
						if (location.href.includes('?from')) {
							let sLink = location.href.split('?')
							window.location.href = 'https://mobile.laiba.shop/html/#/pages/user/user'
						}
						// this.newUrl = location.href
						wx.onMenuShareAppMessage({ 
						    title: '来爸来妈优选', // 分享标题
						    desc: '点击进入', // 分享描述
						    link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'http://oss.laiba.shop/activity/20191216/openproxy.jpeg', // 分享图标
						    success: () => {
						      // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
						    }
						})
						wx.onMenuShareTimeline({
							title: '来爸来妈优选', // 分享标题
							link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'http://oss.laiba.shop/activity/20191216/openproxy.jpeg', // 分享图标
							success: () => {
							  // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
							}
						})
					})
				})
			},
			_getTimeDifference() {
				// 计算时间差
				let day = getDaysDiffBetweenDates(new Date(this.userInfoDetail.birthday) || new Date(), new Date())
				if (day === 0) {
					this.time = '0个月0天'
				} else if (day < 365) {
					this.time = `${parseInt(day / 30)}个月${parseInt(day % 30)}天`
				} else if (day > 365) {
					let year = parseInt(day / 365)
					let month = ''
					let da_y = ''
					if (parseInt(day % 365) < 30) {
						month = 0
						da_y = parseInt(day % 365)
					} else{
						month = parseInt((day % 365) / 30)
						da_y = parseInt((day % 365) % 30)
					}
					this.time = `${year}岁${month}个月${da_y}天`
				}
			},
			// 绑定手机号
			bindMyphone() {
				uni.navigateTo({
					url: '/pages/user/bindPhone?id=2'
				})
			},
			// 手机号和请完善信息 是否显示
			_getBase() {
				getBase({},(res) => {
					this.isCompletion = res.data.isCompletion
				})
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(item){
				if (item === 1) {
					window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order'
				} else if (item === 2) {
					window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.cart'
				} else if (item === 3) {
					window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=sale.coupon'
				} else if (item === 4) {
					window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.favorite'
				} else if (item === 5) {
				    window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.address'
				} else if (item === 6) {
				    window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.certification'
				} else if (item === 7) {
				    window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=exchange&codetype=1&all=1'
				} else if (item === 8) {
				    window.location.href = 'https://mobile.laiba.shop/html/contractweb/#/'
				} else if (item === 9) {
				    window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=installment'
				} else if (item === 10) {
				    window.location.href = 'https://laima.laiba.shop/app/index.php?i=1&c=entry&eid=46'
				} else if (item === 11) {
				    window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=qa.proposal'
				} else if (item === 12) {
				    window.location.href = 'https://laima.laiba.shop/app/index.php?i=1&c=entry&toopenid=ozZP11ITe_JUPSjBRtCFOgr6qY9g&do=chat&m=cy163_customerservice'
				} else if (item === 13) {
				    window.location.href = 'https://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=qa.aboutme'
				} else if (item === 14) {
				    window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=commission'
				} else if (item === 15) {
				    window.location.href = 'https://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.balance'
				}
				
				
			},
			// 点击修改资料
			upDateInfo() {
				console.log(12346)
				uni.navigateTo({
					url: '/pages/userinfo/userinfo'
				}) 
			}
        },
		mounted() {
			this.$nextTick(() => {
				
			})
		}
    }  
</script>  
<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	page {
		background: #f1f2f6;
	}
	.tips {
		 display: flex;
		 justify-content: flex-end;
		 padding: 20upx $page-row-spacing 0;
		 position: relative;
		 .bage {
			 background-color: #fe8700;
			 color: #fff;
			 border-radius: 30upx;
			 font-size: 12px;
			 text-align: center;
			 position: absolute;
			 right: $page-row-spacing - 14upx;
			 top: 16upx;
			 z-index: 1000;
			 padding: 0 8upx;
		 }
	}
	.user-section{
		padding: 180upx $page-row-spacing 0;
		/* #ifdef APP-PLUS*/
			padding: calc(var(--status-bar-height) + 100upx)  $page-row-spacing 0;
		/* #endif */
		/* #ifdef H5*/
			/* padding: 100upx $page-row-spacing 0; */
			padding: 20upx $page-row-spacing 0;
		/* #endif */
		background: #f1f2f6;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 234upx;
			height: 131upx;
			z-index: 0
		}
	}
	/* 基础信息 */
	.user-info{
		background: #fff;
		border-radius: 10upx;
		padding:38upx 30upx;
		margin-bottom: 20upx;
		.user-info-box{
			display:flex;
			align-items:center;
			position:relative;
			z-index: 1;			
			.portrait{
				width: 130upx;
				height: 130upx;
				border:5upx solid #fff;
				border-radius: 50%;
			}
			.username{
				font-size: $font-lg + 2upx;
				color: $font-color-dark;
				margin-left: 20upx;
			}
			.userlabel{
				font-size: $font-sm;
				color: #666666;
				margin-left: 20upx;
				margin-top: 24upx;
				.ic{
					display: inline-block;
					font-size: $font-sm ;
					margin-left: 10upx;
				}				
			}
		}
		.infolabel{
			.l1{
				display: inline-block;
				background:#fff9f2 ;
				color:#fe8700;
				font-size: $font-sm;
				border-radius: 30upx;
				padding:5upx 10upx;
				padding-right: 20upx;
				line-height:28upx;
				height: 40upx;
				.ic{
					display: inline-block;
					font-size: $font-base;
					margin-right: 10upx;
					margin-top: 2upx;
				}	
			}
			
		}
	}
	/* 合作伙伴图片 */
	.partner{
		margin-top: 10upx;
		padding: 0 16.5upx;
		height: 19vw;
		image{
			width: 100%;
			height: 100%;
		}
	}

	.cover-container{
		padding: 0 $page-row-spacing;
		position:relative;
		padding-bottom: 50upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	/* 功能菜单 */
	.order-section{
		@extend %section;
		padding: 28upx 0;
		padding-top:20upx;
		margin: 20upx $page-row-spacing;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: #666666;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.img{
			width:58upx; 
			height: 58upx;
			margin-bottom: 9upx;
			position: relative;
			image{
				width:100%;
				height: 100%;
			}
			.bage{
				background: #fe8700;
				color: #fff;
				font-size: 24upx;
				position:absolute;
				top:-25%;
				right:-25%;
				height: 32upx;
				border-radius: 50upx;
				padding:0 13upx;
			}
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	/* 辅助列表 */
	.history-section{
		margin-top: 10upx;
		background: #fff;
		border-radius:10upx;
	}
	/* 辅助菜单 */
	.other-section{
		@extend %section;
		padding: 28upx 0;
		padding-top:40upx;
		background: none;
		justify-content: space-between;
		margin: 0 34rpx;
		.other-item{
			@extend %flex-center;
			width: 120upx;
			border-radius: 10upx;
			font-size: 23rpx;
			color: #9aa1ac;
			.img{
				width:90upx; 
				height: 90upx;
				background: #fff;
				text-align: center;
				border-radius: 150upx;
				image{
					width:60%;
					height: 60%;
					margin-top: 20%;
				}			
			}
			text{
				margin-top:15upx;
				font-size: 23upx;
			}
		}
		
	}
	.copyright{
		margin-top: 20upx;
		text-align: center;
		image{
			width: 150rpx;
			height: 26rpx;
		}
		.text{
			color: #c0c4cb;
			font-size: 20upx;
			margin-top: 10upx;
		}
	}
</style>